<!--
*@Author: zt
*@Description: 应急资源队伍编辑
*@Date: 2024-08-15
-->
<template>
  <u-dialog v-bind="$attrs"
  :hideBtns="['submit']"
    @close="dialogClose">
    <a-layout class="f-h-100">
      <a-layout-content class="s-bg-white"
        style="overflow: auto">
        <a-space  direction="vertical">
          <u-busi-card title="基本信息"
            :bordered="false"
            v-if="attrs.checkType == '' ? true : attrs.checkType != '2'">
            <u-form :elements="formEls"
              :model="form"
              :gutter="0"
              :class="{'u-resource-view-form': attrs.check}"
              ref="formRef">
            </u-form>
          </u-busi-card>
          <u-busi-card title="近五年救援经历(2019-2023)"
            :bordered="false"
            v-if="checkType == '' ? true : checkType == '1'">
            <u-form :elements="rescueFormEls"
              :model="rescueForm"
              :gutter="0"
              :class="{'u-resource-view-form': attrs.check}">
            </u-form>
          </u-busi-card>
          <u-busi-card title="装备人员列表"
            :bordered="false"
            v-if="attrs.checkType != '2'">
            <u-table :columns="userCols"
              :data="usertabData"
              :scroll="{ y: 300 }"
              :pagination="false"
              :loading="userLoading"
              :check="true">
            </u-table>
          </u-busi-card>

          <!-- 装备详情页的基本信息 -->
          <u-busi-card title="基本信息"
            v-if="checkType == '' ? true : checkType  == '2'"
            :bordered="false"
           >
            <u-form :elements="equipViewFormEls"
              :model="equipViewForm"
              :gutter="0"
              :class="{'u-resource-view-form': attrs.check}">
            </u-form>
          </u-busi-card>
          <u-busi-card title="装备列表"
            :bordered="false"
            v-if="checkType == '' ? true : checkType == '2'"
           >
            <u-table :columns="equipCols"
              :data="equiptabData"
              :pagination="false"
              :loading="equipLoading"
              :scroll="{ y: 300 }"
              :check="true">
            </u-table>
          </u-busi-card>
        </a-space>
      </a-layout-content>
    </a-layout>
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h, useAttrs, watch } from 'vue' 
import { useRoute, useRouter } from 'vue-router'
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import { FormInstance, FormItemProps } from 'ant-design-vue';
import { HomeOutlined, FileTextOutlined, UploadOutlined } from '@ant-design/icons-vue';
import { TreeProps } from 'ant-design-vue/es/vc-tree';
import { ColumnProps } from 'ant-design-vue/es/table';
import { _IColumnProps } from '@/components/common/tableEdit/interface.ts'
import { fileCols } from '@/common/model/fileCols'
import * as resourceServe from "@/service/resource/index";
import * as resourceServeTree from "@/service/resource/tree";
import { teamFormEls, userColsD, equipColsD, rescueFormElsD, equipViewFormElsD } from './data.ts'
const route = useRoute()
const attrs = useAttrs();

interface Props {
  check?: boolean,
  checkType?: string, // 1 队伍详情     2 装备详情
  items?:any
}
const props = withDefaults(defineProps<Props>(), {
  check: true,
  checkType: '',
  items:{}
})

const formRef = ref<FormInstance>()
const form = ref({})
const formEls: Array<_IFormEl> = teamFormEls

// 人员列表
const userLoading = ref<boolean>(false)
const usertabData: Array<any> = ref([]); 
const userCols: Array<_IColumnProps> = userColsD; 

// 装备列表
const equipLoading = ref<boolean>(false)
const equiptabData: Array<any> = ref([]); 
const equipCols: Array<_IColumnProps> = equipColsD; 

// 救援经验的表单
const rescueForm = ref({})
const rescueFormEls = rescueFormElsD;

// 装备的明细查看页的基本信息表单
const equipViewForm = ref({})
const equipViewFormEls = equipViewFormElsD;


/**
*@Author: QWP
*@Description: 获取队伍基本信息、装备基本信息、人员列表
*@Date 2024-08-29 10:38
*/
const getUserData = async () => {
  
  form.value = props.items
  rescueForm.value = props.items
  equipViewForm.value = props.items

  //人员列表
  try {
    userLoading.value = true;
    const res1 = await resourceServe.GetPeople(props.items['FK_INTERID'])
    usertabData.value = JSON.parse(res1.data || '[]')
  } catch (error) {}
  userLoading.value = false;
}

/**
*@Author: QWP
*@Description: 获取装备列表
*@Date 2024-08-29 10:38
*/
const getEquipData = async () => {
  // 装备列表
  try {
    equipLoading.value = true;
    const res = await resourceServe.getEquipments(props.items['FK_INTERID'])
    equiptabData.value = JSON.parse(res.data)
    equipLoading.value = false
  } catch (error) {
    equipLoading.value = false
  }
}

watch(()=> attrs.open, async () => {
  getUserData()
  getEquipData()
})

// 弹窗关闭
const dialogClose = () => {
  form.value = {}
  rescueForm.value = {}
  equipViewForm.value = {}
  usertabData.value = []
  equiptabData.value = []
}
</script>

<style lang='scss' >
.u-resource-view-form {
  &>.ant-row {
    $borderColor: #D9D9D9;
    $fontColor: rgba(0,0,0,0.88);
    border-bottom: 1px solid $borderColor ;
    border-right: 1px solid $borderColor ;
    .ant-form-item {
      margin-bottom: 0;
      .ant-form-item-row {
        .ant-col {
          padding: 4px 0;
          border: 1px solid $borderColor;
          border-bottom: unset;
          border-right: unset;
          border-collapse: collapse;
          background: rgba(242,242,242,0.5);
        }
        .ant-form-item-label {
          label {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: $fontColor;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
      }
      .ant-input-suffix {
        color: #AAAAAA
      }
    }
    .u-view-text {
      .ant-form-item-row {
        height: 60px;
        .ant-form-item-label {
          line-height: 60px;
        }
      }
    }
  }
}
</style>